import React from 'react';
import styles from './style.less';

import { Modal, Form, Input, InputNumber, notification, Button, } from 'antd';

import config from '@/config/config';

import request from '../../utils/request';

import BANNER from '../../assets/sj_banner.png';
import PLATFORMBANNER from '../../assets/sj_platform.png';

const FormItem = Form.Item;

const CreateForm = Form.create()(props => {
  const { form, handleSubmit } = props;
  const { getFieldDecorator } = form;
  const okHandle = e => {
    e.preventDefault();

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleSubmit(fieldsValue);
    });
  };

  const formItemLayout = { labelCol: { xs: { span: 5 }, }, wrapperCol: { xs: { span: 19 }, }, };

  return (
    <Form onSubmit={okHandle} className="form">
      <FormItem
        {...formItemLayout}
        label="姓名"
        style={{marginBottom: 16}}
      >
        {getFieldDecorator('userName', {
          rules: [{ required: true, message: '请输入您的姓名!' }],
        })(
          <Input placeholder="请输入您的姓名" />
        )}
      </FormItem>
      <FormItem
        {...formItemLayout}
        label="电话"
        style={{marginBottom: 16}}
      >
        {getFieldDecorator('phone', {
          rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入您的电话!' }],
        })(
          <Input placeholder="请输入您的电话" />
        )}
      </FormItem>
      <FormItem
        {...formItemLayout}
        label="驾照年限"
        style={{marginBottom: 16}}
      >
        {getFieldDecorator('licenseYear', {
          rules: [{ required: true, message: '请输入您的驾照年限!' }],
        })(
          <InputNumber min={0} max={20} placeholder="请输入您的驾照年限" style={{ width: '100%' }} />
        )}
      </FormItem>
      <div className={styles.buttonWraper}>
        <Button htmlType="submit" type="primary" ghost className={styles.modalButton}>提交抢占名额</Button>
      </div>     
    </Form>
  );
});

class Sj extends React.PureComponent {

  state = {
    visible: false
  }

  handleSubmit = fieldsValue => {
    request(`${config.prefix}/setUser`, {
      method: 'POST',
      body: { ...fieldsValue, source: 'sj' },
    }).then((response = {}) => {
      const { code = -1, msg = '提交不成功' } = response;
      if (code) {
        notification.error({ message: '操作提示', description: msg });
      } else {
        notification.success({ message: '操作提示', description: `个人信息提交成功` });
      }
    })
    console.log(123)
  }

  handleModalVisible = (visible = false) => {
    this.setState(state => ({
      ...state,
      visible
    }))
  }

  render() {
    const { visible } = this.state;
    const config = {
      handleSubmit: this.handleSubmit
    }
    return (
      <main className={styles.sj}>
        <section className={styles.banner}>
          <img src={BANNER} width="100%" />
        </section>    
        <section className={styles.contact}>
          <h3>在线报名</h3>
          <section className={styles.form}>
            <CreateForm {...config} />
          </section>
        </section>
        <section className={styles.platform}>
          <h3>平台优势</h3>
          <section className={styles.ulWraper}>
            <img src={PLATFORMBANNER} width="100%" />
            {/*<ul>
              <li>
                <a>
                  <h5>无忧三包</h5>
                  <p>包牌 包税 包保险</p>
                </a>
              </li>
              <li>
                <a>
                  <h5>超低月租</h5>
                  <p>还款无压力</p>
                </a>
              </li>
              <li>
                <a>
                  <h5>快速提车</h5>
                  <p>专属一证带 审批便捷</p>
                </a>
              </li>
            </ul>*/}
          </section>
        </section>
        <section className={styles.platform}>
          <h3>合作模式</h3>
          <section className={styles.content}>
            <section className={styles.item}>
              <h5>承包合作</h5>
              <p>
                保证金＋月供，一边赚钱一边赚车
                滴滴旗下的小桔汽车根据网约车政策将车辆交给网约车车主，按照合同付完押金后，每个月向车主收取固定的服务费。
                车主使用该车辆通过滴滴平台接单获得收入。车主在合同期结束之后可以选择继续或者取回押金退车。
                相关细则则以正式签订的经营销售合同为准。
              </p>
              <Button type="primary" className={styles.btn} onClick={this.handleModalVisible.bind(this, true)}>加入承包合作计划</Button>
            </section>
            <section className={styles.item}>
              <h5>经营创业</h5>
              <p>
                低首付全款提车，运费收入高
                滴滴旗下的小桔汽车使用贷款的方式将车辆交付给网约车车主。
                网约车主需要付首付，每个月供车贷。
                合同期满后付完车尾款，车辆所有权归网约车车主所有。相关细则则以正式签订的经营销售合同为准。
              </p>
              <Button type="primary" className={styles.btn} onClick={this.handleModalVisible.bind(this, true)}>加入经营创业计划</Button>
            </section>
          </section>
        </section>
        <section className={styles.signin}>
          <h3>报名条件</h3>
          <section className={styles.content}>
            <p><span>*</span>已经获得或者报考本市（地区）网约车驾驶员证，满足本市（地区）考取
            网约车驾驶证的资格要求。</p>
            <p><span>*</span>具备本市户籍或者居住证。</p>
            <p><span>*</span>取得本市合法的相应准驾车型机动车驾驶证，且3年以上驾驶年龄。</p>
            <p><span>*</span>无犯罪前科及重大交通事故</p>
            <Button type="primary" ghost className={styles.btn} onClick={this.handleModalVisible.bind(this, true)}>报名加入</Button>
          </section>
        </section>
        <section className={styles.footer}>
          <section className={styles.content}>
            <p>C照圈---网约车车主生活圈是滴滴和小桔有车旗下网约车授权合作服务商</p>
            <a href="tel:18573099808">
              <Button type="primary" className={styles.btn}>招募电话: 18573099808</Button>
            </a>
          </section>
          <p style={{textAlign: 'center'}}>湖南一白电子商务有限公司   湘ICP备18012645号-1</p>
        </section>
        <a href="tel:13554012900" className={styles.fixed} />
        <Modal
          destroyOnClose
          visible={visible}
          title="个人信息提交"
          footer={null}
          onCancel={this.handleModalVisible.bind(this, false)}
          className="model-wraper"
        >
          <CreateForm {...config} />
        </Modal>        
      </main>
    )
  }

}

export default Sj